<template>
	<view class="page">
		<!-- 交货方式 -->
		<title title='交货方式'></title>
		<div class="select_style">
			<u-cell-group :border="false">
				<u-cell-item :border-bottom="false" title="交货方式" :value="selectStyleText ? selectStyleText : '请选择交货方式'" @click="selectStyleFn"></u-cell-item>
			</u-cell-group>
		</div>
		<div class="getkdNumber" v-if="getkdNumber">
			<p style="color: #606266;font-size: 28rpx;margin-right: 30rpx;">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input">
						{{ params.expressType ? params.expressType : '选择快递' }}
						<u-icon name="arrow-down-fill"></u-icon>
					</view>
				</picker>
			</p>
			<p style="flex: 1;"><u-input v-model="params.expressNo" placeholder="请输入快递单号" /></p>
		</div>
		<div class="btn"><u-button :disabled="disabled" type="primary" shape="circle" size="default" :ripple="true" @click="upload">提 交</u-button></div>
	</view>
</template>

<script>
import title from '@/pages/index/components/title.vue';
import goodsCart from '@/pages/index/components/goodsCart.vue';
export default {

	components: {
		title,
		goodsCart
	},
	data() {
		return {
			params: {
				deliveryType: '',
				expressType: '',
				expressNo: '',
				unitNo: [],
				workNo: '',
				mailType: ''
			},
		
			array: ['顺丰快递', '圆通快递', '中通快递', '韵达快递', '邮政快递', '天天快递'],
			index: 0,
			// 是否显示快递单号
			getkdNumber: false,
			// 选中的方式
			selectStyleText: ''
		};
	},
	computed: {
		// 交货方式时禁用
		disabled() {
			if (this.selectStyleText) {
				return false;
			} else {
				return true;
			}
		}
	},
	methods: {
		selectStyleFn() {
			uni.showActionSheet({
				itemList: ['面对面交货', '快递交货'],
				success: res => {
					if (res.tapIndex == 1) {
						this.selectStyleText = '快递交货';
						this.getkdNumber = true;
					} else {
						// 面对面交货先清除数据
						Object.assign(this.$data.params, this.$options.data().params)
						this.selectStyleText = '面对面交货';
						this.getkdNumber = false;
					}
					this.params.deliveryType = res.tapIndex;
				},
				fail: res => {
					console.log(res.errMsg);
				}
			});
		},
		bindPickerChange(res) {
			this.params.expressType = this.array[res.detail.value];
			console.log(this.params.expressType);
		},
		// 提交数据
		upload() {
			this.$emit('iOoSubmitData', this.params);
		}
	},
	watch: {}
};
</script>

<style lang="scss" scoped>
.page {
	padding: 20rpx 30rpx;
	position: relative;
	height: 100%;
}

.select_style {
	margin-top: 20rpx;
	border-radius: 10rpx;
	overflow: hidden;
	border: 1rpx solid #f1f1f1;
}
.getkdNumber {
	display: flex;
	align-items: center;
	background: #fff;
	margin-top: 20rpx;
	border-radius: 10rpx;
	overflow: hidden;
	padding: 20rpx 30rpx;
	border: 1rpx solid #f1f1f1;
}
.btn {
	position: absolute;
	left: 60rpx;
	right: 60rpx;
	bottom: 100rpx;
}
</style>
